<script>
import CloneModel from "@/views/aihuman/MyResources/CloneModel.vue";
import Picture from "@/views/aihuman/MyResources/Picture.vue";
import VideoList from "@/views/aihuman/MyResources/VideoList.vue";
import Roles from "@/views/aihuman/roles/index.vue";
import UploadDialog from "@/views/aihuman/MyResources/UploadDialog.vue";
import {addOrUpdatePic} from "@/api/aihuman/mySources/picture";
import {addOrUpdateVideo} from "@/api/aihuman/mySources/videoList";
import AudioList from "@/views/aihuman/MyResources/sound/AudioList.vue";
import {addOrUpdateAudio} from "@/api/aihuman/mySources/audio";
import {mapGetters} from "vuex";

export default {
  name: "MySources",
  components: {UploadDialog, CloneModel, Picture, VideoList, Roles, AudioList},
  data() {
    return {
      compView: Picture,
      tabs: [
        {
          label: '图片',
          value: '1'
        },
        {
          label: '视频',
          value: '2'
        },
        {
          label: '音频',
          value: '4'
        },
        // {
        //   label: '我的角色',
        //   value: '3'
        // },

        // {
        //   label: '分身模型',
        //   value: '4'
        // },
        // {
        //   label: '定制数字人',
        //   value: '5'
        // },
        // {
        //   label: '声音克隆',
        //   value: '6'
        // },
        // {
        //   label: '回收站',
        //   value: '7'
        // }
      ],
      activeTab: '1',
      isBatch: false,
      searchForm: {
        name: ''
      },
      searchFieldList: [
        {
          placeholder: '请输入资产名称',
          prop: 'name'
        }
      ],
      selectAll: false
    }
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission[`resources-add`], false),
        deleteBtn: this.vaildData(this.permission[`resources-delete`], false),
      }
    }
  },
  methods: {
    searchFn() {
      this.$refs.contentRef.searchForm = this.searchForm
      this.$refs.contentRef.getList()
    },
    deselect() {
      this.isBatch = false;
      this.$refs.contentRef.isShowCheckbox = false
    },
    handleAll(val) {
      switch (this.activeTab) {
        case '1':
          this.$refs.contentRef.selectAll(val)
          break
        case '2':
          this.$refs.contentRef.selectAll(val)
          break
      }
    },
    removeBatch() {
      switch (this.activeTab) {
        case '1':
          this.$refs.contentRef.removeBatch()
          break
        case '2':
          this.$refs.contentRef.removeBatch()
          break
      }
    },
    toggleBatch() {
      this.$refs.contentRef.isShowCheckbox = true
      this.isBatch = true
    },
    async saveVideo(val) {
      let index = val.oldFileName.lastIndexOf('.')
      let newFileName = val.oldFileName.substring(0, index)
      const {data} = await addOrUpdateVideo(
        {
          name: newFileName,
          url: val.filePath,
          extension: val.extension,
          fileSize: val.fileSize
        }
      )
      this.$message.success(data.msg)
      this.$refs.contentRef.getList()
    },
    async saveAudio(val) {
      let index = val.oldFileName.lastIndexOf('.')
      let newFileName = val.oldFileName.substring(0, index)
      const {data} = await addOrUpdateAudio(
        {
          name: newFileName,
          url: val.filePath,
          extension: val.extension,
          fileSize: val.fileSize
        }
      )
      this.$message.success(data.msg)
      this.$refs.contentRef.getList()
    },
    async savePic(val) {
      let index = val.oldFileName.lastIndexOf('.')
      let newFileName = val.oldFileName.substring(0, index)
      const {data} = await addOrUpdatePic(
        {
          name: newFileName,
          url: val.filePath,
          extension: val.extension,
          fileSize: val.fileSize
        }
      )
      this.$message.success(data.msg)
      this.$refs.contentRef.getList()
    },
    openUploadDialog() {
      this.$refs.uploadDialog.openDialog()
    },
    openUploadVideo() {
      this.$refs.uploadVideo.openDialog()
    },
    openUploadAudio() {
      this.$refs.uploadAudio.openDialog()
    },
    handleClick({name}) {
      this.isBatch = false
      switch (name) {
        case '1':
          this.compView = Picture;
          break;
        case '2':
          this.compView = VideoList;
          break;
        case '3':
          this.compView = Roles;
          break;
        case '4':
          this.compView = AudioList;
          break;
      }
    }
  }
}
</script>

<template>
  <huilan-basic>
    <div class="btn-header">
      <el-button v-if="activeTab === '1' && permissionList.addBtn" type="success" icon="el-icon-plus" size="small" @click="openUploadDialog">
        新增资源
      </el-button>
      <el-button v-if="activeTab === '2' && permissionList.addBtn" type="success" icon="el-icon-plus" size="small" @click="openUploadVideo">
        新增资源
      </el-button>

      <el-button v-if="activeTab === '4' && permissionList.addBtn" type="success" icon="el-icon-plus" size="small" @click="openUploadAudio">
        新增资源
      </el-button>
      <template v-if="permissionList.deleteBtn && activeTab !== '3'">
        <div v-if="isBatch" style="margin-left: 10px;">
          <el-button size="small" type="primary" @click="deselect" style="margin-right: 10px;">取消</el-button>
          <el-checkbox v-model="selectAll" @change="handleAll">全选本页</el-checkbox>
          <el-button type="text" icon="el-icon-delete" size="small" @click="removeBatch">批量删除</el-button>
        </div>
        <el-button v-else icon="el-icon-setting" type="primary" size="small" @click="toggleBatch">批量管理</el-button>

      </template>
    </div>

    <div class="header-box">
      <el-tabs v-model="activeTab" @tab-click="handleClick">
        <el-tab-pane
          v-for="item in tabs"
          :key="item.value"
          :label="item.label"
          :name="item.value"/>
      </el-tabs>
      <div v-if="activeTab !== '3'" class="header-box__btn">
        <HuilanBasicSearchbar :model="searchForm" :fields="searchFieldList" @search="searchFn" @reset="searchFn"/>
      </div>
    </div>

    <div class="content">
      <component
        ref="contentRef"
        :is="compView"
        tag="div"
        :is-page="false"/>
    </div>


    <upload-dialog
      ref="uploadDialog"
      tips="请上传jpeg、jpg、png格式的图片"
      mine-type="image/jpeg,image/png"
      type="image"
      key-folder-path="MyResources/picture"
      @upload-ok="savePic"
    />

    <upload-dialog
      ref="uploadVideo"
      tips="请上传mp4格式的文件"
      mine-type="video/mp4"
      type="video"
      key-folder-path="MyResources/video"
      @upload-ok="saveVideo"
    />


    <upload-dialog
      ref="uploadAudio"
      tips="请上传mp3格式的文件"
      mine-type="audio/mpeg"
      type="audio"
      key-folder-path="MyResources/audio"
      @upload-ok="saveAudio"
    />
  </huilan-basic>
</template>

<style scoped lang="scss">
.content {
  padding: 10px;
  height: calc(100vh - 308px);
  overflow: auto;
}

.btn-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.header-box {
  height: 40px;
  position: relative;

  &__btn {
    position: absolute;
    top: -20px;
    right: 0;
  }
}
</style>
